
<template>
  <header class="top-header">
    <div class="wrapper content">
      <router-link to="/">
        <h1 class="logo"></h1>
      </router-link>
      <div class="search-input">
        <el-input
          v-model="song"
          placeholder="音乐/视频/电台/用户"
          :prefix-icon="Search"
          @keyup.enter="handleSearch"
        ></el-input>
      </div>
    </div>
  </header>
</template>

<script setup>
import {ref} from 'vue'
import { useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue';

const router = useRouter()
const song = ref('')

const handleSearch = () => {
  router.push(`/search?keywords=${song.value}`)
  song.value = ''
}
</script>

<style lang="scss" scoped>
.top-header{
  min-width: 1200px;
  height: 70px;
  padding: 0 20px;
  background-color: #242424;
  .content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo{
      width: 176px;
      height: 69px;
      background-image: url('https://s2.music.126.net/style/web2/img/frame/topbar.png?8ac47dd54c32d38f5b2670f0443fcd64');
      background-position: 0 0;
      background-repeat: no-repeat;
    }
    // 如果需要修改的元素上没有data-v,那么需要加上:deep()深度选择器
    :deep(.el-input__wrapper){
      border-radius: 16px;
      box-shadow: none;
    }
  }
}

</style>